import React from "react";
import Tab from './common/Tab'

const Home = () => {

    // 定义状态
    const [NewProductData, setNewProductData] = React.useState([])
    const [ProductData, setProductData] = React.useState([])
    const [CategoryData, setCategoryData] = React.useState([])

    const getHomeData = async () => {
        let result = await React.$Api.home()

        if (result.code === 1) {
            let data = result.data

            setNewProductData(data.NewProductData)
            setProductData(data.ProductData)
            setCategoryData(data.CategoryData)
        }
    }

    React.useEffect(() => {
        getHomeData()
    }, [])

   
    const NewProduct = () => {
        return (
            <React.$Vant.Swiper autoplay={1000}>
                {NewProductData.map((item,index) => {
                    return (
                        <React.$Vant.Swiper.Item key={index}>
                            <React.$Router.NavLink to={`/product/product/info?id=${item.id}`}>
                                <img src={item.thumb_cdn}  style={{height:'250px'}}/>    
                            </React.$Router.NavLink>
                        </React.$Vant.Swiper.Item>
                    )
                })}
            </React.$Vant.Swiper>
        )  
    }


    const Product = () => {
        return (
            <React.$Vant.Swiper autoplay={1500}>
                {ProductData.map((item, index) => {
                    return (
                        <React.$Vant.Swiper.Item key={index} >
                            <React.$Router.NavLink to={`/product/product/info?id=${item.id}`} className="a_blok">
                                <img src={item.thumb_cdn} style={{height:'200px'}} />
                                <span>查看详情</span>
                            </React.$Router.NavLink>
                        </React.$Vant.Swiper.Item>
                    )
                })}
            </React.$Vant.Swiper>
        )
    }

    return (
        <>
            <div className="banner_shouy">
                <NewProduct />
            </div>

            {/* <!-- 快捷导航 -->  */}
            <div className="shouye_kuanj">
                <div className="swiper-wrapper">
                    <div className="swiper-slide">
                        <React.$Router.NavLink to='/lease/lease/add'>
                            <img src="/assets/images/kj.png" alt="" />
                            <p>产品租赁</p>
                        </React.$Router.NavLink>
                    </div>
                    <div className="swiper-slide">
                        <React.$Router.NavLink to='/order/order/restored'>
                        <img src="/assets/images/kj1.png" alt="" />
                            <p>我要归还</p>
                        </React.$Router.NavLink>
                    </div>
                    <div className="swiper-slide">
                        <React.$Router.NavLink to='/product/product/index?action=home'>
                            <img src="/assets/images/kj2.png" alt="" />
                            <p>商品大全</p>
                        </React.$Router.NavLink>
                    </div>
                    <div className="swiper-slide">
                        <a href="#"><img src="/assets/images/kj3.png" alt="" />
                            <p>关于我们</p>
                        </a>
                    </div>
                </div>
            </div>

            {/* <!-- 产品中心 --> */}
            <div className="chan_p_center">
                {/* <!-- 产品 --> */}
                <div className="chanp_k_sy">
                    <div className="sjpiue_chanp_list">
                        <Product />
                    </div>
                </div>

                <div className="list_color" >
                    <h3>学术文章</h3>
                    <ul>
                        <li>
                            <img src="/assets/images/banner.jpg" alt="" />
                            <div className="right">
                                <p>人的美丽会随着时间的流失,会渐渐流失在往日的光彩照人里,只有知识的美丽才是永...</p>
                                <span>博弈论在商业和生活不同场景中的应用指南教程，比《策略思维》有趣、有料、更有挑战性。</span>
                            </div>
                        </li>
                        <li>
                            <img src="/assets/images/banner1.jpg" alt="" />
                            <div className="right">
                                <p>人的美丽会随着时间的流失 </p>
                                <span>博弈论在商业和生活不同场景中的应用指南教程，比《策略思维》有趣、有料、更有挑战性。</span>
                            </div>
                        </li>
                        <li>
                            <img src="/assets/images/anli.jpg" alt="" />
                            <div className="right">
                                <p>人的美丽会随着时间的流失,会渐渐流失在往日的光彩照人里,只有知识的美丽才是永...</p>
                                <span>博弈论在商业和生活不同场景中的应用指南教程，比《策略思维》有趣、有料、更有挑战性。</span>
                            </div>
                        </li>
                        <li>
                            <img src="/assets/images/anli1.jpg" alt="" />
                            <div className="right">
                                <p>人的美丽会随着时间的流失,会渐渐流失在往日的光彩照人里,只有知识的美丽才是永...</p>
                                <span>博弈论在商业和生活不同场景中的应用指南教程，比《策略思维》有趣、有料、更有挑战性。</span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>

            <div style={{ height: '.75rem' }}></div>

            {/* <!-- 底部导航 --> */}
            <Tab></Tab>
        </>
    )
}

export default Home;